import React, { Component, useState } from 'react';
import { Input, TreeSelect } from 'antd';

import './modify.less';
import { TreeData } from './index';

const { SHOW_PARENT } = TreeSelect;

export interface ModifyProps {
  defaultValue: string;
  treeDefaultExpandedKeys: string[];
  treeData: TreeData[];
  treeNode: TreeData;
  type: 1 | 2;
}

export interface ModifyState {
  collection_name: string;
  p_id: string;
  id?: string;
}

class Modify extends Component<ModifyProps, ModifyState> {
  constructor(props: ModifyProps) {
    super(props);
    if (this.props.type === 1) {
      this.state = {
        collection_name: '',
        p_id: this.props.defaultValue,
      };
    } else if (this.props.type === 2) {
      const treeDefaultExpandedKeys = [...this.props.treeDefaultExpandedKeys];
      this.state = {
        collection_name: this.props.treeNode?.collection_name,
        p_id: treeDefaultExpandedKeys.pop() || '',
        id: this.props.treeNode.id,
      };
    }
  }

  componentDidMount() {}

  render() {
    const tProps = {
      showSearch: true,
      onChange: (value: string) =>
        this.setState(() => ({
          p_id: value,
        })),
      treeCheckable: false,
      showCheckedStrategy: SHOW_PARENT,
      placeholder: '请选择父级',
      value: this.state.p_id,
      defaultValue: this.props.defaultValue,
      treeDefaultExpandedKeys: this.props.treeDefaultExpandedKeys,
      treeData: this.props.treeData,
      allowClear: true,
      fieldNames: {
        value: 'id',
        title: 'collection_name',
        key: 'id',
        label: 'collection_name',
        children: 'children',
      },
    };
    return (
      <div className="modify">
        <div className="wrap">
          <div className="title">父级：</div>
          <TreeSelect className="conntent" {...tProps}></TreeSelect>
        </div>
        <div className="wrap">
          <div className="title">标签名：</div>
          <Input
            className="conntent"
            value={this.state.collection_name}
            onChange={e =>
              this.setState(() => ({
                collection_name: e.target.value,
              }))
            }
          ></Input>
        </div>
      </div>
    );
  }
}

export default Modify;
